﻿@page "/component/nav/steps" 

<Pager DataSource="@(new List<string>
                     {
                         "Demo","Ordered","Vertical","ClickToActive","Fluid","Description","Icon","Active","Completed","Disabled","Size","Inverted"
                     })">
    <Body>
        <Header1>
            Step
            <SubHeader>
                A step shows the completion status of an activity in a series of activities
            </SubHeader>
        </Header1>

        <PresentationPart Title="Demo">
            <Description>
                A set of steps
            </Description>
            <RunTemplate>
                <StepGroup>
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Actived IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Disabled IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup>
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Actived IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Disabled IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Ordered">
            <Description>
                A step can show a ordered sequence of steps                
            </Description>
            <RunTemplate>
                <StepGroup Ordered>
                    <Step Completed  Title="Register" Description="Register a new account" />
                    <Step Completed Title="Verification" Description="Verify your email" />
                    <Step Actived Title="Success" Description="Register complete!" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup Ordered>
    <Step Completed Title=""Register"" Description=""Register a new account"" />
    <Step Completed Title=""Verification"" Description=""Verify your email"" />
    <Step Actived Title=""Success"" Description=""Register complete!"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Vertical">
            <Description>
                A step can be displayed stacked vertically
            </Description>
            <RunTemplate>
                <StepGroup Vertical>
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <StepGroup Vertical VerticalRight>
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup Vertical>
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>

<StepGroup Vertical VerticalRight>
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="ClickToActive">
            <Description>
                A step can be actived by clicked.
            </Description>
            <RunTemplate>
                <StepGroup ClickToActive>
                    <Step Title="Multiple Choice" />
                    <Step Title="Single Choice" />
                    <Step Title="Essay Question" />
                    <Step Title="Comprehension" />
                    <Step Title="Writing" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup ClickToActive>
    <Step Title=""Multiple Choice"" />
    <Step Title=""Single Choice"" />
    <Step Title=""Essay Question"" />
    <Step Title=""Comprehension"" />
    <Step Title=""Writing"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Fluid">
            <Description>
                A fluid step takes up the width of its container
            </Description>
            <RunTemplate>
                <StepGroup Fluid>
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup Fluid>
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Description">
            <Description>
                A step can contain a description
            </Description>
            <RunTemplate>
                <StepGroup>
                    <Step Description="Only has a discription" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup>
    <Step Description=""Only has a discription""/>
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Icon">
            <Description>
                A step can contain an icon
            </Description>
            <RunTemplate>
                <StepGroup>
                    <Step Title="Shipping" Description="Choose your shipping options" IconClass="truck" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup>
    <Step Title=""Shipping"" Description=""Choose your shipping options"" IconClass=""truck"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Active">
            <Description>
                A step can be highlighted as active
            </Description>
            <RunTemplate>
                <StepGroup>
                    <Step Actived Title="Shipping" Description="Choose your shipping options" IconClass="truck" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup>
    <Step Actived Title=""Shipping"" Description=""Choose your shipping options"" IconClass=""truck"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Completed">
            <Description>
                A step can show that a user has completed it
            </Description>
            <RunTemplate>
                <StepGroup>
                    <Step Completed Title="Shipping" Description="Choose your shipping options" IconClass="truck" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup>
    <Step Completed Title=""Shipping"" Description=""Choose your shipping options"" IconClass=""truck"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Disabled">
            <Description>
                A step can show that it cannot be selected
            </Description>
            <RunTemplate>
                <StepGroup>
                    <Step Disabled Title="Shipping" Description="Choose your shipping options" IconClass="truck" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup>
    <Step Disabled Title=""Shipping"" Description=""Choose your shipping options"" IconClass=""truck"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Size">
            <Description>
                StepGroup can have different sizes
            </Description>
            <RunTemplate>
                <StepGroup Size="Size.Mini">
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
                <StepGroup Size="Size.Tiny">
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
                <StepGroup Size="Size.Small">
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
                <StepGroup Size="Size.Huge">
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
                <StepGroup Size="Size.Massive">
                    <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                    <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                    <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                </StepGroup>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<StepGroup Size=""Size.Mini"">
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>
<StepGroup Size=""Size.Tiny"">
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>
<StepGroup Size=""Size.Small"">
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>
<StepGroup Size=""Size.Huge"">
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>
<StepGroup Size=""Size.Massive"">
    <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
    <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
    <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
</StepGroup>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted">
            <Description>
                A step's color can be inverted
            </Description>
            <RunTemplate>
                <Segment Inverted>
                    <StepGroup Inverted>
                        <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                        <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                        <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                    </StepGroup>
                    <br />
                    <StepGroup Inverted Vertical>
                        <Step Completed IconClass="registered" Title="Register" Description="Register a new account" />
                        <Step Completed IconClass="envelope" Title="Verification" Description="Verify your email" />
                        <Step Actived IconClass="check" Title="Success" Description="Register complete!" />
                    </StepGroup>
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<Segment Inverted>
    <StepGroup Inverted>
        <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
        <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
        <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
    </StepGroup>
    <StepGroup Inverted Vertical>
        <Step Completed IconClass=""registered"" Title=""Register"" Description=""Register a new account"" />
        <Step Completed IconClass=""envelope"" Title=""Verification"" Description=""Verify your email"" />
        <Step Actived IconClass=""check"" Title=""Success"" Description=""Register complete!"" />
    </StepGroup>
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>